<template>
	<view class="course-dir">
		<view v-for="(chapter, index) in chapterList" :key="index">
			<text class="chapters text-ellipsis">第{{index+1}}章 {{chapter.name}}</text>
			<view class="sections row "
				:class="{active: index=== activeObj.chapterIndex&& index2 === activeObj.sectionIndex}"
				@click="playVideo(index, index2, section)"
				v-for="(section, index2) in chapter.sectionList" :key="index2">
				<text class="iconfont icon-roundrightfill"></text>
				<view class="row">
					<text>{{index+1}}-{{index2+1}}</text>
					<text class="title text-ellipsis">{{section.name}}</text>
				</view>
				<!-- 如果是免费节且未购买，则显示试看标签 -->
				<text v-if="section.isFree && !isBuy" class="see">试看</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否已购买课程
			isBuy: Boolean,
			chapterList: {
				type: Array,
				default: () => [
					{
						id: 1, 
						name: '项目内容介绍', 
						sectionList: [ 
							{
								id: 1, 
								name: '什么是uniapp框架', 
								isFree: 1, // 是否付费（0付费，1免费）
							},
							{
								id: 2,
								name: '安装开发工具和插件', 
								isFree: 1, 
							},
							{
								id: 3, 
								name: '开发第一个helloworld项目',
								isFree: 0,
							}
						]
					},

					{
						id: 2, 
						name: '初始化知行峰在线教育项目', 
						sectionList: [ 
							{
								id: 3, 
								name: '创建项目和完善配置', 
								isFree: 0,
							},
							{
								id: 4, 
								name: '导入静态文件内容', 
								isFree: 0, 
							}
						]
					}
				]
			},

			activeObj: {
				type: Object,
				default: ()=>({
					chapterIndex: -1, //章下标
					sectionIndex: -1,// 节下标
				})
			}
		},

		methods: {
			// 点击试看或节播放
			playVideo(chapterIndex, sectionIndex, section) {
				// 如果是免费节或者已购买课程，则允许播放
				if(section.isFree || this.isBuy) {
					// 更新当前激活的章节索引
					this.activeObj.chapterIndex = chapterIndex
					this.activeObj.sectionIndex = sectionIndex
					this.$emit('playVideo', {section: section, activeObj: this.activeObj})
				}else {
					// 未购买且非免费节，提示需要先购买
					this.$util.msg('请先购买')
				}
			}
		}
	}
</script>

<style lang="scss">

	// 课程目录样式
	.course-dir {
		padding: 0 36rpx; // 左右内边距
		.chapters {
			margin-top: 30rpx; // 上外边距
			margin-bottom: 10rpx; // 下外边距
			color: $mxg-text-color-black; // 文字颜色
			font-size: 35rpx; // 字体大小
			font-weight: bold; // 字体加粗
		}
		.sections {
			padding: 20rpx 0; // 上下内边距
			font-size: 30rpx; // 字体大小
			border-bottom: $mxg-underline; // 底部边框
			line-height: 40rpx; // 行高
			color: #3d3c40; // 文字颜色
			text {
				margin-right: 10rpx; // 右外边距
			}
			.title {
				width: 470rpx; // 宽度
			}
			.see {
				color: $mxg-text-color-blue; // 文字颜色
				font-size: 25rpx; // 字体大小
				// 靠右
				flex: 1; // 弹性布局
				text-align: right; // 文本右对齐
			}
		}

		// 激活状态样式
		.active {
			color: $mxg-text-color-blue; // 蓝色文字
		}
	}
</style>
